"use client"

import { View, Text, StyleSheet, TouchableOpacity, Modal, Pressable, ScrollView, Platform } from "react-native"
import { theme } from "../../constants/theme"
import {
    BookOpen,
    FileText,
    Headphones,
    Mic,
    Music,
    Gamepad,
    PenTool,
    SplitSquareVertical,
    Globe,
    AlignJustify,
} from "lucide-react-native"
import { useSafeAreaInsets } from "react-native-safe-area-context"
import { useRouter } from "expo-router"

interface PracticeModalProps {
    visible: boolean
    onClose: () => void
}

// 创建一个更浅的主题色
const veryLightPrimaryColor = "#EEF3FF" // 非常浅的蓝色

// 练习项目数据 - 使用更浅的主题色
const PRACTICE_ITEMS = {
    special: [
        {
            id: "english_choice",
            name: "英文选义",
            icon: BookOpen,
            color: veryLightPrimaryColor,
            iconColor: theme.colors.primary.default,
            route: "/practices/english-choice",
        },
        {
            id: "chinese_choice",
            name: "中文选词",
            icon: FileText,
            color: veryLightPrimaryColor,
            iconColor: theme.colors.primary.default,
            route: "/practices/chinese-choice",
        },
        {
            id: "dictation",
            name: "听写",
            icon: Headphones,
            color: veryLightPrimaryColor,
            iconColor: theme.colors.primary.default,
            route: "/practices/dictation",
        },
        {
            id: "reading",
            name: "朗读评测",
            icon: Mic,
            color: veryLightPrimaryColor,
            iconColor: theme.colors.primary.default,
            route: "/practices/reading",
        },
        {
            id: "listening",
            name: "随身听",
            icon: Music,
            color: veryLightPrimaryColor,
            iconColor: theme.colors.primary.default,
            route: "/practices/listening",
        },
        {
            id: "word_match",
            name: "单词消消乐",
            icon: Gamepad,
            color: veryLightPrimaryColor,
            iconColor: theme.colors.primary.default,
            route: "/practices/word-match",
        },
    ],
    spelling: [
        {
            id: "spell_practice",
            name: "拼写训练",
            icon: PenTool,
            color: veryLightPrimaryColor,
            iconColor: theme.colors.primary.default,
            route: "/practices/spell-practice",
        },
        {
            id: "split_spell",
            name: "拆分拼写",
            icon: SplitSquareVertical,
            color: veryLightPrimaryColor,
            iconColor: theme.colors.primary.default,
            route: "/practices/split-spell",
        },
        {
            id: "natural_spell",
            name: "自然拼读",
            icon: Globe,
            color: veryLightPrimaryColor,
            iconColor: theme.colors.primary.default,
            route: "/practices/natural-spell",
        },
        {
            id: "letter_spell",
            name: "字母拼写",
            icon: AlignJustify,
            color: veryLightPrimaryColor,
            iconColor: theme.colors.primary.default,
            route: "/practices/letter-spell",
        },
    ],
}

export function PracticeModal({ visible, onClose }: PracticeModalProps) {
    const insets = useSafeAreaInsets()
    const router = useRouter()

    const handleSelectPractice = (practiceId: string) => {
        // 查找对应的练习项目
        let selectedPractice = null

        // 在专项练习中查找
        selectedPractice = PRACTICE_ITEMS.special.find((item) => item.id === practiceId)

        // 如果没找到，在拼写练习中查找
        if (!selectedPractice) {
            selectedPractice = PRACTICE_ITEMS.spelling.find((item) => item.id === practiceId)
        }

        // 如果找到了对应的练习项目，导航到对应的路由
        if (selectedPractice && selectedPractice.route) {
            onClose()
            router.push(selectedPractice.route)
        } else {
            console.log("未找到对应的练习路由:", practiceId)
            onClose()
        }
    }

    return (
        <Modal visible={visible} transparent animationType="fade" onRequestClose={onClose}>
            <View style={styles.overlay}>
                <Pressable style={styles.backdrop} onPress={onClose} />
                <View style={[styles.content, { paddingBottom: Math.max(insets.bottom, 20) }]}>
                    <View style={styles.handle} />

                    <Text style={styles.title}>练习模式</Text>

                    <ScrollView
                        style={styles.scrollView}
                        contentContainerStyle={styles.scrollContent}
                        showsVerticalScrollIndicator={false}
                    >
                        {/* 专项练习 */}
                        <View style={styles.section}>
                            <Text style={styles.sectionTitle}>专项练习</Text>
                            <View style={styles.grid}>
                                {PRACTICE_ITEMS.special.map((item) => (
                                    <TouchableOpacity
                                        key={item.id}
                                        style={styles.gridItem}
                                        onPress={() => handleSelectPractice(item.id)}
                                        activeOpacity={0.7}
                                    >
                                        <View style={[styles.iconContainer, { backgroundColor: item.color }]}>
                                            <item.icon size={18} color={item.iconColor} />
                                        </View>
                                        <Text style={styles.itemName}>{item.name}</Text>
                                    </TouchableOpacity>
                                ))}
                            </View>
                        </View>

                        {/* 拼写练习 */}
                        <View style={styles.section}>
                            <Text style={styles.sectionTitle}>拼写练习</Text>
                            <View style={styles.grid}>
                                {PRACTICE_ITEMS.spelling.map((item) => (
                                    <TouchableOpacity
                                        key={item.id}
                                        style={styles.gridItem}
                                        onPress={() => handleSelectPractice(item.id)}
                                        activeOpacity={0.7}
                                    >
                                        <View style={[styles.iconContainer, { backgroundColor: item.color }]}>
                                            <item.icon size={18} color={item.iconColor} />
                                        </View>
                                        <Text style={styles.itemName}>{item.name}</Text>
                                    </TouchableOpacity>
                                ))}
                            </View>
                        </View>

                        <View style={{ height: 20 }} />
                    </ScrollView>

                    <TouchableOpacity style={styles.closeButton} onPress={onClose} activeOpacity={0.7}>
                        <Text style={styles.closeButtonText}>关闭</Text>
                    </TouchableOpacity>
                </View>
            </View>
        </Modal>
    )
}

const styles = StyleSheet.create({
    overlay: {
        position: "absolute",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        justifyContent: "flex-end",
        backgroundColor: "rgba(0, 0, 0, 0.5)",
    },
    backdrop: {
        position: "absolute",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
    },
    content: {
        backgroundColor: theme.colors.neutral.white,
        borderTopLeftRadius: theme.borderRadius.extraLarge,
        borderTopRightRadius: theme.borderRadius.extraLarge,
        paddingTop: theme.spacing.md,
        maxHeight: "70%",
    },
    handle: {
        width: 36,
        height: 4,
        backgroundColor: theme.colors.neutral.lightGray,
        borderRadius: 2,
        alignSelf: "center",
        marginBottom: theme.spacing.md,
    },
    title: {
        fontSize: theme.fontSize.xl,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.neutral.black,
        textAlign: "center",
        marginBottom: theme.spacing.md,
    },
    scrollView: {
        maxHeight: 400,
    },
    scrollContent: {
        paddingHorizontal: theme.spacing.xl,
    },
    section: {
        marginBottom: theme.spacing.xl,
    },
    sectionTitle: {
        fontSize: theme.fontSize.lg,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.darkGray,
        marginBottom: theme.spacing.md,
        paddingLeft: theme.spacing.xs,
        borderLeftWidth: 3,
        borderLeftColor: theme.colors.primary.default,
    },
    grid: {
        flexDirection: "row",
        flexWrap: "wrap",
        marginHorizontal: -theme.spacing.xs,
    },
    gridItem: {
        width: "20%", // 5列布局
        padding: theme.spacing.xs,
        marginBottom: theme.spacing.md,
    },
    iconContainer: {
        width: "100%",
        aspectRatio: 1,
        borderRadius: theme.borderRadius.medium,
        alignItems: "center",
        justifyContent: "center",
        marginBottom: theme.spacing.xs,
        borderWidth: 1,
        borderColor: "rgba(91, 142, 244, 0.2)", // 添加一个非常浅的边框
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.05)",
                shadowOffset: { width: 0, height: 1 },
                shadowOpacity: 0.3,
                shadowRadius: 2,
            },
            android: {
                elevation: 1,
            },
        }),
    },
    itemName: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.black,
        textAlign: "center",
        fontWeight: theme.fontWeight.medium,
    },
    closeButton: {
        marginHorizontal: theme.spacing.xl,
        marginTop: theme.spacing.md,
        marginBottom: theme.spacing.lg,
        paddingVertical: theme.spacing.md,
        backgroundColor: theme.colors.neutral.lightGray,
        borderRadius: theme.borderRadius.large,
        alignItems: "center",
    },
    closeButtonText: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.medium,
        color: theme.colors.neutral.darkGray,
    },
})

